<template>
  <div class="custom-bread-crumb">
    <Breadcrumb>
      <BreadcrumbItem v-if="homeRoute" :to="{name: homeRoute.name}">
        <i :class="homeRoute.meta.icon"></i>
        <span>{{showTitle(homeRoute)}}</span>
      </BreadcrumbItem>
      <BreadcrumbItem
        v-for="item in breadCrumbList"
        :to="item.component||item.redirect||item.render?{name: item.name}:undefined"
        :key="`bread-crumb-${item.name}`"
      >
        <i :class="item.meta.icon"></i>
        <span>{{showTitle(item)}}</span>
      </BreadcrumbItem>
    </Breadcrumb>
  </div>
</template>
<script>
import { getHomeRoute, showTitle } from '@/util/routerUtil.js'

export default {
  name: 'CustomBreadCrumb',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 面包屑展示的路由列表
    breadCrumbList() {
      return this.list.filter(item => item.meta && item.meta.hideInBread !== 1)
    },
    // 首页路由，默认展示
    homeRoute() {
      return getHomeRoute(this.$store.state.routesConfig, this.$config.homeRouteName)
    }
  },
  methods: {
    showTitle(item) {
      return showTitle(item, this)
    }
  }
}
</script>
<style lang="less">
.custom-bread-crumb {
  display: inline-block;
  vertical-align: top;
}
</style>
